<style>
  input{
    outline: none;
    border: 0 none;
    background: transparent;
    font-size: 24px;
    width:150px;
  }
</style>

<template>
  <div class="chaxun">
    <h2>查询结果如下：</h2>

        <h3 v-if="chaxun.userid">ID：{{chaxun.userid}}</h3>
        <h3 v-if="form.name">姓名:{{form.name}}</h3>
        <h3 v-if="form.username">用户名:{{form.username}}</h3>
        <h3 v-if="form.pwd">密码: <input type="password" :value="form.pwd" readonly></h3>
        <h3 v-if="form.age">年龄:{{form.age}}</h3>
        <h3 v-if="form.sex">性别:{{form.sex}}</h3>
        <h3 v-if="form.hunfou">婚否:{{form.hunfou}}</h3>
        <h3 v-if="form.aihao">爱好:{{form.aihao}}</h3>
        <h3 v-if="form.yijian">意见:{{form.yijian}}</h3>
        <h3 v-if="form.pingjia">评价:{{form.pingjia}}</h3>
  </div>
</template>

<script>
export default {
  name: 'chaxun',
  data () {
    return {
      userid:this.$route.params.userid,
      chaxun:'',
      form:''
    }
  },
  created: function(){
      this.$http.get('http://192.168.1.65:3000/getdetiles',{params:{userid:this.userid}}).then((response) => {
						var datas = response.data;
						// console.log(datas)
            if(datas.status=='error'){
              this.$vux.toast.show({
                type:'text',
                width:'70%',
                text: datas.message
              })
            }else{
              this.chaxun =datas ;
              this.form = JSON.parse(datas.form)
            }
					}, (response) => {
						this.$vux.toast.show({
							type:'text',
							width:'70%',
							text: '后台错误'
						})
					}); 
  },
  methods: {
     
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
  text-align: center;
  padding-top: 100px;
}
h3{
  width:80%;
  margin: 0 auto;
}
p{
  text-align: center;
}
span{
  color: #42b983;
}
ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
